var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = document.body.clientWidth-20;
canvas.height = 5000;
canvas.style.display = "block";

canvas.onmousemove = function (event) {
    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;
    move(x, y);
};


canvas.addEventListener("touchmove", function (e) {
    var event = e.touches[0];
    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;
    move(x, y);
});
canvas.addEventListener("touchend", function (e) {
    e.preventDefault;
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
},false);

canvas.onmouseout = function () {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
};

function move(x, y) {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    context.moveTo(0, y);
    context.lineWidth = 0.2;
    context.lineTo(context.canvas.width, y);
    context.moveTo(Math.round(x / 50) * 50, 0);
    context.lineTo(Math.round(x / 50) * 50, context.canvas.height);
    context.stroke();

}

